<template>
    <z-paging
        ref="paging"
        v-model="orderCouponList"
        :refresher-out-rate="0.8"
        auto-scroll-to-top-when-reload
        :auto-clean-list-when-reload="true"
        safe-area-inset-bottom
        bg-color="#fff"
    >
        <view class="topTitle" slot="top">券码信息</view>
        <view class="coupon">
            <view class="coupon_item">
                <view class="coupon_item_title flex_wrap row_middle">
                    <text class="coupon_item_title_orderNumberDisplay">{{
                        orderCouponList.goodsName
                    }}</text>
                    <view class="coupon_item_title_halfCircle left" />
                    <view class="coupon_item_title_halfCircle right" />
                </view>
                <view class="coupon_item_content flex_wrap flex_column">
                    <view
                        class="coupon_item_content_num flex_wrap row_between-column_center"
                    >
                        <text>总张数：{{ orderCouponList.goodsCount }}</text>
                        <text style="color: #588bf3"
                            >剩余张数：{{ orderCouponList.claimableCount }}
                        </text>
                    </view>
                    <view
                        class="coupon_item_content_code flex_wrap row_center-column_center"
                    >
                        <u--image
                            :src="baseSrc"
                            width="200px"
                            height="200px"
                        ></u--image>
                    </view>
                    <view
                        class="coupon_item_content_rightButtons flex_wrap flex_column row_right row_bottom"
                    >
                        <text
                            class="coupon_item_content_rightButtons_recived"
                            @click="toReciveRecord(toReciveRecord)"
                            >领取记录 >
                        </text>
                    </view>
                    <view
                        class="coupon_item_content_rightButtons flex_wrap row_center-column_center"
                    >
                        长按图片可分享保存
                    </view>
                </view>
            </view>
            <u-picker
                :show="show"
                :columns="columns"
                keyName="label"
                @confirm="confirm"
                @cancel="show = false"
                immediateChange
            ></u-picker>
            <u-button
                type="primary"
                :text="confirmMeetD"
                @click="show = true"
            ></u-button>
            <view>
                <button
                    style="
                        border: 0;
                        outline: none;
                        font-size: 32rpx;
                        background-color: #fff;
                        text-align: right;
                        margin-top: 16rpx;
                        color: #588bf3;
                    "
                    open-type="share"
                >
                    赠送给好友>
                </button>
            </view>
        </view>
    </z-paging>
</template>

<script>
import {
    getOrderDetailSalesmanByOrderNum,
    getMiniCodeByAppId,
} from "@/api/orderSalesman.js";
import {
    forConferenceBinding,
    updateOrderBindingMeet,
    salesManMeetingInfo,
} from "@/api/salesmanMeeting.js";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            goodsType: "",
            topImage: "",
            show: false,
            confirmMeetD: "暂无绑定会议",
            columns: [[{ label: "无", id: "" }]],
            orderNum: "",
            codeSize: uni.upx2px(472),
            shareCanvasWidth: uni.upx2px(694),
            shareCanvasHeight: uni.upx2px(558),
            currentOrderDetailData: {},
            canvasWidth: 0,
            canvasHeight: 0,
            orderCouponList: [],
            codeImage: {},
            couponStatusMap: {
                1: "待领取",
                2: "已领取",
                3: "退款中",
                4: "已退款",
            },
            shareButtonCustomStyle: {
                fontSize: "28rpx",
                width: "410rpx",
                height: "82rpx",
                background: " #588BF3",
                borderRadius: "4000rpx",
            },
            baseSrc: "",
        };
    },
    onLoad(options) {
        this.orderNum = options.orderNum || "";
    },
    mounted() {
        const version = __wxConfig.envVersion;
        const params = {
            page: "pages_receive/receive_detail/index",
            scene: this.orderNum,
            env_version: version,
            check_path: false,
            appId: this.$appId,
        };
        getMiniCodeByAppId(params).then((res) => {
            if (res.code === 200 && res.data) {
                var showImgData = res.data;
                this.baseSrc = "data:image/png;base64," + showImgData;
            }
        });
        this.getListMeet();
        this.queryList();
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },

    methods: {
        //发送给朋友
        onShareAppMessage(res) {
            if (this.goodsType == "FEED_FLAG") {
                return {
                    title: "HI!我向您赠送了一份饲料！快去领取吧~",
                    path:
                        "pages_receive/receive_detail/index?scene=" +
                        this.orderNum,
                    imageUrl:
                        "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/19/600e4090f07146e4bb114538a7e7a4d7.png",
                };
            } else if (this.goodsType == "CHICKEN_FLAG") {
                return {
                    title: "HI!我向您赠送了一只鸡！快去领取吧~",
                    path:
                        "pages_receive/receive_detail/index?scene=" +
                        this.orderNum,
                    imageUrl:
                        "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/19/4619f7aa0d1d48f19e57d98e9d3ec7dd.png",
                };
            } else {
                return {
                    title: "HI!我向您赠送了一份商品！快去领取吧~",
                    path:
                        "pages_receive/receive_detail/index?scene=" +
                        this.orderNum,
                    imageUrl: this.thumbnail,
                };
            }

            console.log(path, "path");
        },
        async getListMeet() {
            const res = await forConferenceBinding({
                tenantId: this.$tendId,
            });

            const rows = res.data?.map((v) => ({
                ...v,
                label: `${v.theme}(${v.submitManName})`,
            }));
            rows.unshift({ label: "暂不绑定", id: "", theme: "暂无绑定会议" });
            this.columns = [rows];
        },

        async confirm(e) {
            const params = {
                meetId: e.value[0].id,
                orderNum: this.orderCouponList.orderNum,
            };
            const { code, msg } = await updateOrderBindingMeet(params);
            if (code === 200) {
                uni.$u.toast(msg);
                this.show = false;
                this.queryList();
            }
        },
        toReciveRecord() {
            uni.$u.route({
                url: "pages_shop1/order/pick_up_record/index",
                params: {
                    salesmanId: this.orderCouponList.salesmanId,
                    orderNum: this.orderCouponList.orderNum,
                },
            });
        },
        async queryList() {
            // this.codeImageMap = {};
            const result = await getOrderDetailSalesmanByOrderNum(
                this.orderNum
            );
            if (result.data && result.code === 200) {
                this.orderCouponList = result.data;
                const goodsSnapshot = JSON.parse(
                    this.orderCouponList.goodsSnapshot
                );
                this.goodsType = goodsSnapshot.handleFlag || null;
                this.thumbnail = goodsSnapshot.thumbnail || null;
                !result.data?.meetId && (this.confirmMeetD = `暂无绑定会议`);
                result.data?.meetId &&
                    salesManMeetingInfo(result.data?.meetId).then((res) => {
                        res.code === 200 &&
                            (this.confirmMeetD = `已绑定（${res.data?.theme}）会议`);
                    });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.topTitle {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    padding-top: 28rpx;
    padding-left: 28rpx;
    padding-right: 28rpx;
}

.canvas {
    width: 694rpx;
    height: 558rpx;
    position: fixed;
    left: 1000px;
    top: 0;
}
.coupon_item_content_num {
    margin-bottom: 30rpx;
    padding: 0 46rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
}
.coupon_item_content_Buttons {
    width: 100%;
    margin-top: 86rpx;
}
.coupon {
    padding: 0 28rpx;
    box-sizing: border-box;

    &_item {
        width: 694rpx;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.12);
        border-radius: 12rpx;
        margin-top: 28rpx;

        &_content {
            width: 100%;
            padding: 60rpx;
            box-sizing: border-box;

            &_code {
                position: relative;

                &_shadow {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: rgba(230, 230, 230, 0.7);
                }
            }

            &_rightButtons {
                // height: 220rpx;

                &_recived {
                    margin-top: 50rpx;
                    margin-right: 20rpx;
                }

                // &_button {
                // 	font-size: 24rpx !important;
                // 	height: 44rpx !important;
                // }
            }
        }

        &_title {
            padding: 0 40rpx;
            height: 76rpx;
            border-bottom: 1px dashed rgba(51, 51, 51, 0.5);
            position: relative;
            justify-content: center;
            &_orderNumberDisplay {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            &_orderNumberDisplay.disable {
                text-decoration: line-through;
                color: #999999 !important;
            }

            &_status {
                font-size: 26rpx;
                color: #588bf3;
                font-weight: bold;
            }

            &_status.disable {
                color: #999999 !important;
            }

            &_halfCircle {
                width: 18rpx;
                height: 24rpx;
                background-color: #ededed;
                position: absolute;
            }

            &_halfCircle.left {
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                left: 0;
                bottom: -12rpx;
            }

            &_halfCircle.right {
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                right: 0;
                bottom: -12rpx;
            }
        }
    }
}
</style>
